<template>
	<view>
		<view class="wrapper">
			<view aria-hidden="true">
				<view class="text-center text-lg text-blue">请拍照识别身份证信息</view>
			</view>
			<view aria-hidden="true" aria-label="点击进行身份识别登录验证,需要拍照身份证照片" class="image-a">
				<!-- #ifdef MP-WEIXIN -->
				<ocr-navigator @onSuccess="scanCard" :opposite="false">
					<image class="image-s" :src="img_src + 'ocr.png'"></image>
				</ocr-navigator>
				<!-- #endif -->
				<!-- #ifdef H5 -->
				<image :src="img_src + 'ocr.png'"></image>
				<!-- #endif -->
			</view>
			<view aria-hidden="true">
				<view class="text-center text-lg">或手动输入实名信息</view>
			</view>
			<form>
				<view aria-role="tab" class="cu-form-group margin-t" style="border-top: 0;">
					<view class="title">姓名</view>
				</view>
				<view aria-role="textbox" class="margin-l">
					<input type="text" class="input input_het" v-model="users.citizenName" placeholder="请输入姓名" />
				</view>
				<view aria-role="tab" class="cu-form-group margin-t">
					<view class="title">身份证号</view>
				</view>
				<view aria-role="textbox" class="margin-l">
					<input class="input input_het" type="text" v-model="users.citizenId" placeholder="请输入身份证号" />
				</view>
				<view class="cu-form-group margin-t">
					<input aria-role="textbox" type="text" class="border" placeholder="请输入手机号" v-model="users.phone" />
					<!-- <button aria-role="button" class='cu-btn border round bg-blue'>获取手机号</button> -->
					<button class='cu-btn border round bg-blue' type="default" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">获取手机号</button>
				</view>
				<view class="cu-form-group margin-t">
					<input aria-role="textbox" aria-label="请输入验证码" type="text" class="border" placeholder="请输入验证码" v-model="mcode.mcode" />
					<button aria-role="button" v-if="!showText" class='cu-btn border round bg-blue' @click="getCode">获取验证码</button>
					<button aria-role="button" v-if="showText" class='cu-btn border round bg-grey' :disabled="disabled">{{second}}秒后重新获取</button>
				</view>
				<checkbox-group class="block" @change="CheckboxChange">
					<view class="cu-form-group margin-t">
						<checkbox aria-role="checkbox" :class="checkbox[0].checked?'checked':''" :checked="checkbox[0].checked?true:false"
						 value="A"></checkbox>
						<view aria-role="tab" class="text-gray margin-l margin-t flex">我同意杭州市残疾人联合会数字残联使用我所提交的信息用于快捷登录。</view>
					</view>
				</checkbox-group>
				<view class="text-gray margin-l">
					查看<view aria-role="link" @click="openPdf" class="text-dis">《个人信息保护政策》</view>
				</view>
			</form>
			<view class="padding flex flex-direction">
				<button aria-role="button" class="cu-btn bg-blue margin-tb-sm lg " :disabled="!checkbox[0].checked" @click="regitMe">开始实名注册</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				showText: false,
				disabled: true,
				checkbox: [{
					value: 'A',
					checked: false
				}],
				mcode: {
					ticket: '',
					mcode: ''
				},
				users: {
					citizenId: '',
					citizenName: '',
					citizenType: '1',
					phone: ''
				},
				second: 120,
				msg: '',
				sueess: true,
				img_src: this.$utils.SYS_URL + this.$utils.IMG_URL,
				sys_url: this.$utils.SYS_URL
			}
		},
		onShow() {

		},
		onLoad(options) {

		},
		methods: {
			CheckboxChange(e) {
				var items = this.checkbox,
					values = e.detail.value;
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					items[i].checked = false;
					for (var j = 0, lenJ = values.length; j < lenJ; ++j) {
						if (items[i].value == values[j]) {
							items[i].checked = true;
							break
						}
					}
				}
			},
			openPdf() {
				uni.showLoading({
					title: "加载中"
				});
				uni.downloadFile({
					url: this.sys_url + '/pdf/grxx.pdf',
					success: function(res) {
						uni.openDocument({
							filePath: res.tempFilePath,
							fileType: 'pdf',
							success: function(res) {
								uni.hideLoading();
							}
						});
					}
				});
			},
			getPhoneNumber(e) {
				uni.showLoading({
					title: "加载中"
				});
				uni.login({
					provider: 'weixin',
					success: (code_res => {
						let phonedata = {
							"js_code": code_res.code,
							"encrypt_data": e.detail.encryptedData,
							"iv": e.detail.iv
						}
						this.$request.postForm("/unia/weixin/phoneinfo", {
							"phonedata": JSON.stringify(phonedata)
						}).then(
							res => {
								uni.hideLoading();
								let data = JSON.parse(res.data);
								this.users.phone = data.phoneNumber
							})
					}),
					fail: () => {
						uni.showToast({
							title: "获取失败",
							icon: "none"
						});
					}
				})

			},
			scanCard(res) {
				this.users.citizenId = res.detail.id.text
				this.users.citizenName = res.detail.name.text;
				this.img = res.detail.image_path;

				let params = {
					"citizenId": res.detail.id.text,
					"citizenName": res.detail.name.text
				};
				this.vaildCard(params);

			},
			vaildCard(params) {
				let that = this;
				this.$request.postForm("/view/users/card", params).then(
					result => {
						that.sueess = result.meta.success;
						that.msg = result.meta.message;
						if (result.meta.success) {
							that.users.citizenType = '0';
						}
					},
					errors => {
						console.log(errors);
					}
				);
			},

			//获取手机验证码
			getCode() {
				uni.showLoading({
					title: "加载中"
				});
				let phone = this.users.phone;
				if (!phone) {
					this.$utils.msg('手机号不能为空');
					return;
				}
				this.showText = true
				var interval = setInterval(() => {
					--this.second
				}, 1000)
				setTimeout(() => {
					clearInterval(interval);
					this.showText = false;
					this.second = 120;
				}, 120000);
				this.$request.getForm("/view/users/mcode", {
					mobile: phone
				}).then(res => {
					uni.hideLoading();
					this.mcode.ticket = res.data.ticket;
					this.$utils.msg('短信验证码已发送');
				})
			},

			//实名认证注册	
			regitMe() {
				uni.showLoading({
					title: "加载中"
				});
				let Vcard = /(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
				let Vphone = /^1[3|4|5|7|8][0-9]{9}$/;
				let userinfo = this.users;
				if (!userinfo.citizenName) {
					this.$utils.msg('姓名为空');
					return;
				}
				if (Vcard.test(userinfo.citizenId) === false) {
					this.$utils.msg('身份证号格式不正确，请确认后再输入');
					return;
				}
				if (Vphone.test(userinfo.phone) === false) {
					this.$utils.msg('请填写正确的手机号码');
					return;
				}
				if (!this.mcode.mcode) {
					this.$utils.msg('验证码为空');
					return;
				}
				let params = {
					"citizenId": userinfo.citizenId,
					"citizenName": userinfo.citizenName
				};
				this.vaildCard(params);
				if (!this.sueess) {
					this.$utils.msg(this.msg)
					return;
				}
				let susers = uni.getStorageSync('users');
				this.users = Object.assign(susers, this.users);
				var uregs = {
					mcode: this.mcode,
					users: this.users
				};
				this.$request.postJson("/view/users/regit", uregs).then(
					res => {
						uni.hideLoading();
						if (res.meta.success) {
							susers.state = res.data.users.state;
							susers.citizenName = res.data.users.citizenName;
							susers.uid = res.data.users.uid;
							susers.citizenId = res.data.users.citizenId;
							susers.stateId = res.data.users.stateId;
							susers.phone = res.data.users.phone;
							susers.citizenType = res.data.users.citizenType;
							susers.stateId = '1';
							this.$store.commit('login', susers);
							uni.setStorageSync('token', res.data.token);
							//临时：直接人脸识别通过
							this.$request.postForm('/view/users/realn', {
								uid: this.users.uid,
								stateId: '1'
							}).then(
								res => {
									//提示成功
									uni.showModal({
										title: '提示',
										content: '实名注册成功',
										showCancel: false,
										success: () => {
											uni.switchTab({
												url: '/pages/admin/vhome',
												success: (res) => {
													let page = getCurrentPages().pop(); //当前页面
													if (page == undefined || page == null) return;
													page.onLoad();
												}
											});
										}
									});
								},
								err => {}
							);
							//临时：直接人脸识别通过

							// 暂时不需要人脸识别
							// if(res.data.citizenType == '0') {
							// 	uni.showModal({
							// 		title: '提示',
							// 		content: '实名注册成功，继续人脸识别吗？',
							// 		success: (e) => {
							// 			if (e.confirm) {
							// 				uni.navigateTo({url: '/pages_mine/users/realn'});
							// 			} else {
							// 				uni.navigateTo({url: '/pages_mine/users/uacid-view'});
							// 			}
							// 		}
							// 	});
							// } else {
							// 	uni.navigateTo({url: '/pages_mine/users/uacid-view'});
							// }
							// 暂时不需要人脸识别

						} else {
							this.$utils.msg(res.meta.message);
						}
					},
					err => {
						console.log(err);
						this.$utils.msg("服务器内部错误！");
					}
				);
			}
		}

	}
</script>

<style lang='scss'>
	page {
		background: #fff;
	}

	.cu-form-group {
		border-top: 0.5px solid #eee;
	}

	.margin-t {
		margin-top: 20upx;
	}

	.text-m {
		margin-top: 100upx;
	}

	.margin-l {
		margin-left: 26upx;
	}

	.text-font {
		font-size: 40rpx;
		margin-left: 20%;
		margin-bottom: 20rpx;
	}

	.wrapper {
		position: relative;
		z-index: 90;
		background: #fff;
		padding-bottom: 40upx;
	}

	.image-a {
		width: 100%;
		padding: 14upx 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.image-s {
		height: 360rpx;
		width: 580rpx;
	}

	.cu-form-group .title {
		text-align: justify;
		padding-right: 16px;
		font-size: 16px;
		position: relative;
		height: 33px;
		line-height: 33px;
		margin-right: 61px;
	}

	.title-sm {
		text-align: justify;
		padding-right: 220px;
		font-size: 16px;
		position: relative;
		height: 33px;
		line-height: 33px;
		margin-right: 61px;
	}

	.back-btn {
		position: absolute;
		left: 40upx;
		z-index: 9999;
		padding-top: var(--status-bar-height);
		top: 40upx;
		font-size: 40upx;
		color: $font-color-dark;
	}

	.text-dis {
		display: initial;
		color: cornflowerblue;
	}

	.border {
		margin-top: 40upx;
	}

	.input_het {
		height: 1.8rem !important;
	}
</style>
